<template>
  <view class="expertsList-page">
    <view class="expert-item">
      <view class="item" v-for="(item,index) in expertsList" :key="index" :data-index="index" :data-url="'localConsultant'" @click="navigateUrl">
        <view class="icon">
            <image
              :src="item.icon"
              mode="scaleToFill"
              lazy-load="false">
            </image>
        </view>
        <view class="title">{{item.title}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import Vue from "vue";
export default {
  data() {
    return {
        expertsList:[{
            icon:"../static/images/icon_expert_1.png",
            title:"房产抵押服务"
        },{
            icon:"../static/images/icon_expert_2.png",
            title:"车产抵押服务"
        },{
            icon:"../static/images/icon_expert_3.png",
            title:"信用卡服务"
        },{
            icon:"../static/images/icon_expert_4.png",
            title:"极速服务"
        },{
            icon:"../static/images/icon_expert_5.png",
            title:"工资流水服务"
        },{
            icon:"../static/images/icon_expert_6.png",
            title:"社保服务"
        },{
            icon:"../static/images/icon_expert_7.png",
            title:"营业执照服务"
        },{
            icon:"../static/images/icon_expert_8.png",
            title:"公积金服务"
        },{
            icon:"../static/images/icon_expert_10.png",
            title:"自存流水服务"
        },{
            icon:"../static/images/icon_expert_11.png",
            title:"按揭房服务"
        },{
            icon:"../static/images/icon_expert_12.png",
            title:"按揭车服务"
        },{
            icon:"../static/images/icon_expert_13.png",
            title:"保单服务"
        }]
    };
  },
  onShow(){
    // #ifdef H5
        document.title=`我的顾问`
    // #endif
  },
  methods: {
    //页面跳转
    navigateUrl(e){
      const url=e.currentTarget.dataset.url
      const index=e.currentTarget.dataset.index
      Vue.customNavigateTo(`${url}?index=${index}`);
     }
  }
};
</script>

<style lang="less" scoped>
.expertsList-page {
  background: #f4f4f4;
  overflow: hidden;
  .expert-item {
    margin-top: 20upx;
    display: flex;
    flex-wrap: wrap;
    color: #333333;
    font-size: 26upx;
    text-align: center;
    background: #ffffff;
  }
  .item {
    width: 248upx;
    //height: 215upx;
     padding: 48upx 0;
    border-top: 2upx solid #f7f7f7;
    border-bottom: 2upx solid #f7f7f7;
    border-right: 2upx solid #f7f7f7;
    &:nth-child(3n){
        border-right: none;
    }
    .icon{
        margin-bottom: 16upx;
        image{
            width: 80upx;
            height:80upx;
        }
    }
  }
}
</style>
